



// 封装 querySelector
// function qs(ele) {
//     return document.querySelector(ele)
// }

//简写
const qs = (ele) => document.querySelector(ele)

// 接口地址：https://www.apifox.cn/apidoc/shared-36f0cbc0-9064-44bc-850a-805e263bf494/api-25827426


// 省市区渲染 ==> ajax 或取到省市区的数据 + map + join + innerHTML 
// 默认让安徽省显示 ==> 设置下拉框的值为安徽省的结果 value属性

//todo 设置好根路径
axios.defaults.baseURL = 'http://124.223.14.236:3001/api'

//!  ===============封装优化=================
// 封装省的数据和渲染
//async 修饰函数会变异步
async function getProvinceData() {
    const { data: res } = await axios.get('/city/province')
    // console.log(res.data);

    const provinceStr = res.data.map(item => `
    <option value="${item.province}">${item.name}</option>
    `).join('')
    qs('#province').innerHTML = '<option value="">请选择省份</option>' + provinceStr
}

//封装市的数据和渲染
async function getCityData(provinceCode) {
    const { data: { data: cityData } } = await axios.get('/city/city', {
        params: {
            provinceCode,
        }
    })
    console.log(cityData);

    const cityStr = cityData.map(item => `
    <option value="${item.city}">${item.name}</option>
    `).join('')
    qs('#city').innerHTML = '<option value="">请选择城市</option>' + cityStr
}

//封装区的数据和渲染
async function getAreaData(provinceCode, cityCode) {
    const { data: { data: areaData } } = await axios.get('/city/area', {
        params: {
            provinceCode,
            cityCode,
        }
    })
    console.log(areaData);

    const areaStr = areaData.map(item => `
    <option value="${item.area}">${item.name}</option>
    `).join('')
    qs('#county').innerHTML = '<option value="">请选择区县</option>' + areaStr
}







// todo  ajax 获取到省市区的数据
async function init() {
    // ?调用函数
    await getProvinceData() //异步, getProvinceData()结果是一个实例对象

    // 安徽省的编码34
    qs('#province').value = '34'

    // todo 去获取安徽省下所有城市的数据
    // ?调用函数
    await getCityData('34')

    // 合肥市的编码
    qs('#city').value = '01'

    // todo 获取合肥市以下所有区的数据
    // ?调用函数
    await getAreaData('34', '01')

    // 瑶海区的编码
    qs('#county').value = '02'

}
init()


//todo 省发生改变的时候，市对应也要改变
// 省注册change事件
qs('#province').addEventListener('change', async function () {
    // console.log(this.value); //省下拉框的数据

    // ?调用函数
    await getCityData(this.value)


    // // ajax发送请求，获取省对应的城市数据，渲染到城市下拉框
    // const { data: { data: cityData } } = await axios.get('/city/city', {
    //     params: {
    //         provinceCode: this.value
    //     }
    // })
    // console.log(cityData);

    // const cityStr = cityData.map(item => `
    // <option value="${item.city}">${item.name}</option>
    // `).join('')

    // qs('#city').innerHTML = '<option value="">请选择城市</option>' + cityStr

    //! 解决 bug：需要重置区县数据
    qs('#county').innerHTML = '<option value="">请选择区县</option>'
})

// todo 省发生改变的时候，市对应也要改变
// 市注册change事件
qs('#city').addEventListener('change', async function () {
    // console.log(this.value); //市下拉框的数据

    // ?调用函数
    await getAreaData(qs('#province').value, this.value)


    // // ajax发送请求，获取市对应的城市数据，渲染到城市下拉框
    // const { data: { data: areaData } } = await axios.get('/city/area', {
    //     params: {
    //         provinceCode: qs('#province').value,
    //         cityCode: this.value
    //     }
    // })
    // console.log(areaData);

    // const areaStr = areaData.map(item => `
    // <option value="${item.area}">${item.name}</option>
    // `).join('')
    // qs('#county').innerHTML = '<option value="">请选择区县</option>' + areaStr
})
